<template>
  <div class="page-container">
    <h4>用户数据统计</h4>
    <div class="user-stats-modules">
      <!-- 用户活跃度统计卡片 -->
      <el-card class="stats-card active-users-card">
        <div class="card-content">
          <div class="icon-wrapper">
            <el-icon class="stats-icon"><User /></el-icon>
          </div>
          <div class="stats-details">
            <h3>活跃用户</h3>
            <p class="stats-value">1,248</p>
            <div class="stats-trend">
              <span class="trend-up">
                <el-icon><Top /></el-icon>
                12.5%
              </span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
          <div class="stats-chart">
            <!-- 这里可以用简单的CSS图表或引入小型图表库 -->
            <div class="mini-chart"></div>
          </div>
        </div>
      </el-card>

      <!-- 用户增长统计卡片 -->
      <el-card class="stats-card new-users-card">
        <div class="card-content">
          <div class="icon-wrapper">
            <el-icon class="stats-icon"><TrendCharts /></el-icon>
          </div>
          <div class="stats-details">
            <h3>新增用户</h3>
            <p class="stats-value">326</p>
            <div class="stats-trend">
              <span class="trend-down">
                <el-icon><Bottom /></el-icon>
                5.3%
              </span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
          <div class="stats-chart">
            <div class="mini-chart"></div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="search-header">
          <el-icon><Filter /></el-icon>
          <span>筛选查询</span>
        </div>
      </template>
      <el-form :model="queryUser" class="search-form">
        <el-form-item label="用户名">
          <el-input
            v-model="queryUser.username"
            placeholder="请输入用户名"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="queryUser.phone"
            placeholder="请输入手机号"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="queryUser.startRegisterTime"
            type="date"
            placeholder="开始日期"
            format="YYYY-MM-DD"
          />
          <span class="date-separator">至</span>
          <el-date-picker
            v-model="queryUser.endRegisterTime"
            type="date"
            placeholder="结束日期"
            format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item class="action-buttons">
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户列表 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>用户列表</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            添加用户
          </el-button>
        </div>
      </template>

      <div v-loading="loading" class="user-grid-container">
        <div v-if="userList.length > 0" class="user-grid">
          <div v-for="user in userList" :key="user.id" class="user-card">
            <div class="user-card-header">
              <div class="user-avatar">
                <span>{{ user.username.charAt(0).toUpperCase() }}</span>
              </div>
              <div class="user-info">
                <span class="user-name">{{ user.username }}</span>
                <span class="user-phone">{{ user.phone }}</span>
              </div>
              <el-tag
                :type="user.status === 'active' ? 'success' : 'danger'"
                class="user-status-tag"
                effect="light"
              >
                {{ user.status === 'active' ? '正常' : '禁用' }}
              </el-tag>
            </div>
            <div class="user-card-body">
              <div class="detail-item">
                <el-icon><Calendar /></el-icon>
                <span>注册于 {{ user.createdAt }}</span>
              </div>
              <div class="detail-item">
                <el-icon><Clock /></el-icon>
                <span>最后登录 {{ user.createdAt }}</span>
              </div>
            </div>
            <div class="user-card-actions">
              <el-button type="primary" link @click="handleEdit(user)">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button type="warning" link @click="handleResetPassword(user)">
                <el-icon><Key /></el-icon>
                重置密码
              </el-button>
              <el-button
                :type="user.status === 'active' ? 'danger' : 'success'"
                link
                @click="handleToggleStatus(user)"
              >
                <el-icon :is="user.status === 'active' ? 'Lock' : 'Unlock'" />
                {{ user.status === 'active' ? '禁用' : '启用' }}
              </el-button>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无用户数据" />
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="queryUser.current"
            v-model:page-size="queryUser.size"
            :page-sizes="[5, 10, 15, 20]"
            :total="queryUser.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog
        :title="dialogType === 'add' ? '添加用户' : '编辑用户'"
        v-model="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
    >
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="dialogType === 'add'">
          <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              show-password
          />
        </el-form-item>
        <!-- 添加头像上传 -->
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            :action="uploadAction"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
            :on-progress="handleAvatarProgress"
            accept="image/*"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar">
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            <div v-if="uploading" class="upload-progress">
              <el-progress :percentage="uploadProgress" :show-text="false" />
              <span>上传中...</span>
            </div>
          </el-upload>
          <div class="avatar-tips">
            <p>支持 JPG、PNG 格式，文件大小不超过 2MB</p>
            <p>建议尺寸：200x200 像素</p>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handelQx">取消</el-button>
          <el-button
              type="primary"
              @click="handleSubmit"
              :loading="submitting"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 重置密码对话框 -->
    <el-dialog
        title="重置密码"
        v-model="resetPasswordVisible"
        width="400px"
        :close-on-click-modal="false"
    >
      <el-form
          ref="passwordFormRef"
          :model="passwordForm"
          :rules="passwordRules"
          label-width="80px"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
              v-model="passwordForm.oldPwd"
              type="password"
              placeholder="请输入原密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input
              v-model="passwordForm.newPwd"
              type="password"
              placeholder="请输入新密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="newPwd1">
          <el-input
              v-model="passwordForm.newPwd1"
              type="password"
              placeholder="请再次输入新密码"
              show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetPasswordVisible = false">取消</el-button>
          <el-button
              type="primary"
              @click="changePassword"
              :loading="submitting"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  
</template>

<script setup>
import {useUserStore} from "@/pinia/index.js";

var useUserStore1 = useUserStore();
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {adminFindPage,adminAdd,adminUpdateUserStatus,uploadAvatar} from "@/assets/admin.js";
import {
  Search,
  Refresh,
  Plus,
  Edit,
  Key,
  Lock,
  Unlock,
  User,
  Top,
  Bottom,
  TrendCharts,
  Calendar,
  Clock,
  Filter
} from '@element-plus/icons-vue'
import {passwordsUpdate} from "@/assets/user.js";
const submittingPassword = ref(false)
const passwordRules = {
  oldPwd: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
  ],
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
  ],
  newPwd1: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
  ]
}

const passwordForm = ref({
  oldPwd: '',
  newPwd: '',
  newPwd1: ''
})
const passwordFormRef = ref(null)
const changePassword = async () => {
  try {
    // 验证表单
    await passwordFormRef.value.validate()

    submittingPassword.value = true

    // 调用API修改密码
    const res = await passwordsUpdate(
        useUserStore1.getUserId,   // id
        passwordForm.value.oldPwd,  // oldPwd
        passwordForm.value.newPwd,  // newPwd
        passwordForm.value.newPwd1  // newPwd1
    )

    if (res.data.code === 200) {
      ElMessage.success('密码修改成功')
      passwordFormRef.value.resetFields() // 重置表单
    } else {
      ElMessage.error(res.data.message || '密码修改失败')
    }
  } catch (error) {
    if (error?.errors) {
      // 这是表单验证错误，不需要处理
      return
    }
    ElMessage.error('修改密码时发生错误')
    console.error('密码修改错误:', error)
  } finally {
    submittingPassword.value = false
  }
}
// 搜索表单
const searchForm = reactive({
  username: '',
  phone: '',
  dateRange: []
})

// 表格数据
const loading = ref(false)
const userList = ref([])
const queryUser = ref({
  "current":1,
  "size":5,
  "username":null,
  "phone":null,
  "startRegisterTime":null,
  "endRegisterTime":null,
  "total":0
})

const handelUser = () =>{
  adminFindPage(queryUser.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      // 为每个用户添加默认状态字段，后端返回的是0/1，转换为active/inactive
      userList.value = res.data.data.records.map(user => ({
        ...user,
        status: user.status === 1 ? 'active' : 'inactive' // 1-启用，0-禁用
      }))
      queryUser.value.total = res.data.data.total
    }
  })
}
handelUser()
// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const resetSearch = () =>{
  location.reload();
}
// 添加/编辑用户
const dialogVisible = ref(false)
const dialogType = ref('add')
const formRef = ref(null)
const form = ref({
  username: '',
  phone: '',
  password: '',
  avatar: ''
})

// 头像上传相关
const uploading = ref(false)
const uploadProgress = ref(0)
const uploadAction = '#' // 不使用默认上传，我们自定义上传逻辑

// 处理头像上传成功
const handleAvatarSuccess = (res, file) => { 
  if (res.code === 200) {
    form.value.avatar = res.data // 假设后端返回的是图片URL
    ElMessage.success('头像上传成功')
  } else {
    ElMessage.error(res.message || '头像上传失败')
  }
  uploading.value = false
  uploadProgress.value = 0
}

// 处理头像上传错误
const handleAvatarError = (error) => {
  console.error('头像上传失败:', error)
  ElMessage.error('头像上传失败，请重试')
  uploading.value = false
  uploadProgress.value = 0
}

// 处理上传进度
const handleAvatarProgress = (event) => {
  uploadProgress.value = Math.round(event.percent)
}

// 上传前的检查
const beforeAvatarUpload = (file) => { 
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) { 
    ElMessage.error('头像只能是图片格式!')
    return false
  }
  if (!isLt2M) { 
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }

  // 自定义上传逻辑
  uploading.value = true
  uploadProgress.value = 0
  
  // 调用上传API
  uploadAvatar(file).then(res => {
    if (res.data.code === 200) {
      form.value.avatar = res.data.data // 设置头像URL
      ElMessage.success('头像上传成功')
    } else {
      ElMessage.error(res.data.message || '头像上传失败')
    }
  }).catch(error => {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败，请重试')
  }).finally(() => {
    uploading.value = false
    uploadProgress.value = 0
  })

  return false // 阻止默认上传行为
}

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 重置密码
const resetPasswordVisible = ref(false)
const resetPasswordFormRef = ref(null)
const resetPasswordForm = reactive({
  password: '',
  confirmPassword: ''
})

const resetPasswordRules = {
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetPasswordForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 提交状态
const submitting = ref(false)

// 搜索
const handleSearch = () => {
queryUser.value.current = 1
  queryUser.value.size = 5
  handelUser()
}

// 重置搜索
// const resetSearch = () => {
//   searchForm.username = ''
//   searchForm.phone = ''
//   searchForm.dateRange = []
//   handleSearch()
// }

// 分页
const handleSizeChange = (val) => {
  queryUser.value.current = 1
  queryUser.value.size = val
  handelUser()
}

const handleCurrentChange = (val) => {
  queryUser.value.current = val
  handelUser()
}

// 添加用户
const handleAdd = () => {
  dialogType.value = 'add'
  form.value = {
    username: '',
    phone: '',
    password: '',
    avatar: ''
  }
  dialogVisible.value = true
}

// 编辑用户
const handleEdit = (row) => {
  dialogType.value = 'edit'
  form.value = {
    username: row.username,
    phone: row.phone,
    password: '',
    avatar: row.avatar || '' // 设置现有头像
  }
  dialogVisible.value = true
}
const handleSearch1 = () =>{
  queryUser.value.current = 1
  queryUser.value.size = 3
  handelUser()
}
const handelQx = () =>{
  form.value = {
    username: '',
    phone: '',
    password: '',
    avatar: ''
  }
  dialogVisible.value = false
  handelUser()
}
// 提交表单
const handleSubmit = async () => {
  adminAdd(form.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      ElMessage({
        message: res.data.message,
        type: 'success',
      })
      handelQx()
      handelUser()
    }
  })
}

// 重置密码
const handleResetPassword = (row) => {
  resetPasswordForm.password = ''
  resetPasswordForm.confirmPassword = ''
  resetPasswordVisible.value = true
}

const submitResetPassword = async () => {
  if (!resetPasswordFormRef.value) return

  await resetPasswordFormRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      // TODO: 实现重置密码功能
      setTimeout(() => {
        submitting.value = false
        resetPasswordVisible.value = false
        ElMessage.success('密码重置成功')
      }, 1000)
    }
  })
}

// 切换用户状态
const handleToggleStatus = (row) => {
  const action = row.status === 'active' ? '禁用' : '启用'
  
  ElMessageBox.confirm(
      `确定要${action}该用户吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    try {
      // 调用后端接口切换用户状态
      const response = await adminUpdateUserStatus(row.id)
      
      if (response.data.code === 200) {
        ElMessage.success(response.data.message || `${action}成功`)
        // 根据后端返回的新状态更新本地数据
        const newStatus = response.data.data // 后端返回的新状态值(0或1)
        row.status = newStatus === 1 ? 'active' : 'inactive'
        // 刷新用户列表
        handelUser()

      } else {
        ElMessage.error(response.data.message || `${action}失败`)
        location.reload()
      }
    } catch (error) {
      console.error('更新用户状态失败:', error)
      ElMessage.error(`${action}失败，请重试`)

    }
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<style scoped>
/* region 全局与布局 */
.page-container {
  padding: 24px;
  background-color: #f7f8fc;
  min-height: 100vh;
}

.search-card,
.table-card {
  background: #fff;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  transition: box-shadow 0.3s ease;
}

.search-card:hover,
.table-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
/* endregion */

/* region 头部标题 */
.page-container h4 {
  font-size: 32px;
  color:  #2c3e50;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-container h4::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  margin: 15px auto 0;
  border-radius: 2px;
}
/* endregion */

/* region 表格 */
.table-card {
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  padding: 16px 24px;
  border-bottom: none;
  color: #2c3e50;
  letter-spacing: 1px;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.user-grid-container {
  min-height: 300px;
  background-color: #E9F7FE;
  border-radius: 8px;
  padding: 20px;
}

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.user-card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1d8e0;
}

.user-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--el-color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  margin-right: 16px;
  flex-shrink: 0;
}

.user-info {
  flex-grow: 1;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.user-phone {
  font-size: 14px;
  color: #888;
}

.user-status-tag {
  position: absolute;
  top: 0;
  right: 0;
}

.user-card-body {
  margin-bottom: 20px;
  color: #666;
  font-size: 13px;
  border-top: 1px solid #f0f2f5;
  padding-top: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.detail-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.user-card-actions {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  justify-content: space-around;
}

:deep(.el-table .el-button.is-link) {
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}

:deep(.el-table .el-button--primary.is-link:hover) {
  background-color: rgba(64, 158, 255, 0.1);
  color: var(--el-color-primary);
}
:deep(.el-table .el-button--warning.is-link:hover) {
  background-color: rgba(230, 162, 60, 0.1);
  color: var(--el-color-warning);
}
:deep(.el-table .el-button--danger.is-link:hover) {
  background-color: rgba(245, 108, 108, 0.1);
  color: var(--el-color-danger);
}
:deep(.el-table .el-button--success.is-link:hover) {
  background-color: rgba(103, 194, 58, 0.1);
  color: var(--el-color-success);
}

:deep(.el-tag) {
  border-radius: 4px;
}
/* endregion */

/* region 表单与对话框 */
:deep(.el-form--inline .el-form-item) {
  margin-right: 16px;
}

:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
}

:deep(.el-dialog__body) {
  padding: 24px 32px;
}

.avatar-uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

/* 上传进度样式 */
.upload-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  z-index: 10;
}

.upload-progress .el-progress {
  margin-bottom: 5px;
}

.upload-progress span {
  font-size: 12px;
  color: #666;
}

/* 头像提示信息 */
.avatar-tips {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.avatar-tips p {
  margin: 2px 0;
}

/* 头像上传器悬停效果 */
.avatar-uploader:hover .avatar {
  opacity: 0.8;
}

.avatar-uploader:hover .avatar-uploader-icon {
  color: var(--el-color-primary);
}
/* endregion */

/* region 用户统计卡片 */
.user-stats-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 12px;
  border: none;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 24px;
  position: relative;
  min-height: 120px;
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.stats-icon {
  font-size: 28px;
}

.stats-details h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
}

.stats-value {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.stats-trend {
  margin-top: 6px;
  display: flex;
  align-items: center;
  font-size: 13px;
}

.trend-up {
  color: #388e3c;
  display: flex;
  align-items: center;
  margin-right: 8px;
  font-weight: 600;
}

.trend-down {
  color: #d32f2f;
  display: flex;
  align-items: center;
  margin-right: 8px;
  font-weight: 600;
}

.stats-chart {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 60px;
  opacity: 0.5;
}

.mini-chart {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 卡片1 - 活跃用户 */
.active-users-card {
  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
}
.active-users-card .icon-wrapper {
  background-color: rgba(255, 255, 255, 0.2);
}
.active-users-card .stats-icon {
  color: white;
}
.active-users-card h3,
.active-users-card .stats-value,
.active-users-card .trend-text {
  color: white;
}

/* 卡片2 - 新增用户 */
.new-users-card {
  background: linear-gradient(135deg, #fa8c16 0%, #faad14 100%);
}
.new-users-card .icon-wrapper {
  background-color: rgba(255, 255, 255, 0.2);
}
.new-users-card .stats-icon {
  color: white;
}
.new-users-card h3,
.new-users-card .stats-value,
.new-users-card .trend-text {
  color: white;
}
/* endregion */

/* region 响应式调整 */
@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }
  .card-content {
    padding: 16px;
  }
  .stats-chart {
    display: none;
  }
}
/* endregion */

/* region 搜索卡片 */
.search-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fe 100%);
  border-radius: 12px;
  border: 1px solid #eef2f8;
}

:deep(.search-card .el-card__header) {
  border-bottom: none;
  padding-bottom: 0;
}

.search-header {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 1px;
}

.search-header .el-icon {
  margin-right: 10px;
  color: #2c3e50;
  vertical-align: middle;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  padding-top: 10px;
}

:deep(.search-form .el-form-item) {
  margin-bottom: 0 !important;
}

:deep(.search-form .el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.search-form .el-input__wrapper),
:deep(.search-form .el-date-editor.el-input) {
  width: 250px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: all 0.2s ease-in-out;
}
:deep(.search-form .el-input__wrapper:hover),
:deep(.search-form .el-date-editor.el-input:hover) {
  border-color: #c0c4cc;
}

:deep(.search-form .el-input__wrapper.is-focus) {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15);
}

.date-separator {
  margin: 0 12px;
  color: #a8abb2;
}

.action-buttons {
  margin-left: auto;
}

.action-buttons .el-button {
  border-radius: 8px;
  font-weight: 500;
  height: 38px;
  padding: 0 22px;
  transition: all 0.3s ease;
  border: none;
}

.action-buttons .el-button--primary {
  color: #fff;
  background: linear-gradient(45deg, #3a8ee6 0%, #66b1ff 100%);
  box-shadow: 0 4px 8px -2px rgba(64, 158, 255, 0.4);
}

.action-buttons .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -2px rgba(64, 158, 255, 0.5);
}

.action-buttons .el-button--default {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.action-buttons .el-button--default:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
  color: var(--el-color-primary);
}

.action-buttons .el-button + .el-button {
  margin-left: 12px;
}
/* endregion */

/* region 头部标题 */
.page-container h4 {
  color: var(--el-color-success);
}
/* endregion */

/* region 表单与对话框 */
:deep(.el-dialog) {
  border-radius: 12px;
}
/* endregion */
</style>
